<template>
  <div class="main-scroll">
    <cheader :title="title"></cheader>
    <!-- <div class="c-main-make">
      <div class="title-text">数据筛选</div>
      <div style="padding: 40px" class="c-filter">
        <el-form :inline="true" :model="findMsg" class="demo-form-inline">
          <el-form-item label="输入授课人">
            <el-input
              v-model="findMsg.lecturerName"
              placeholder="授课人"
            ></el-input>
          </el-form-item>
          <el-form-item label="培训时间">
            <el-date-picker
              v-model="findMsg.courseTime"
              type="date"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="部门">
            <el-input
              v-model="findMsg.workshop"
              placeholder="部门"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
            <el-button icon="el-icon-search" @click="reset">重置</el-button>
          </el-form-item>
          <el-form-item label="输入班组">
            <el-input
              v-model="findMsg.team"
              placeholder="班组"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div> -->
    <div class="c-main-show">
      <div class="main-seting">
        <div class="title-text">
          <p>班次列表</p>
        </div>
          <!-- <el-button
          type="primary"
          style="
            float: right;
            margin-right: 20px;
            margin-bottom: 20px;
            margin-top: 20px;
          "
          @click='dialogVisible1 = true'>添加</el-button> -->
          <el-button
          style="
            float: right;
            margin-right: 20px;
            margin-bottom: 20px;
            margin-top: 20px;
          ">导出</el-button>
        <div style="margin: 20px">
          <el-table :data="trainList" border>
            <el-table-column type="index" :index="indexAdd" label="序号">
              </el-table-column>
            <el-table-column prop="courseTheme" label="小课主题">
              <template slot-scope="scope">
                <p>{{ scope.row.courseTheme }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="workshop" label="部门">
              <template slot-scope="scope">
                <p>{{ scope.row.workshop }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="team" label="班组">
              <template slot-scope="scope">
                <p>{{ scope.row.team }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="courseTime" label="授课时间">
              <template slot-scope="scope">
                <p>{{ scope.row.courseTime | formatDate("yyyy-MM-dd") }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="lecturerName" label="授课人">
              <template slot-scope="scope">
                <p>{{ scope.row.lecturerName }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="joinArrivalNames" label="确认参加人员">
              <template slot-scope="scope">
                <p v-for="(item,index) in scope.row.joinArrivalNames" :key="index">{{item}}</p>
                <!-- <p>{{ scope.row.joinArrivalNames }}</p> -->
              </template>
            </el-table-column>
            <el-table-column prop="nonArrivalNames" label="不参加人员">
              <template slot-scope="scope">
                <p v-for="(item,index) in scope.row.nonArrivalNames" :key="index">{{item}}</p>
                <!-- <p>{{ scope.row.nonArrivalNames }}</p> -->
              </template>
            </el-table-column>
            <el-table-column prop="nonArrivalCauses" label="不参加原因">
              <template slot-scope="scope">
                <p v-for="(item,index) in scope.row.nonArrivalCauses" :key="index">{{item}}</p>
                <!-- <p>{{ scope.row.nonArrivalCauses }}</p> -->
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click='goDetail(scope.row.id)'>详情</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteRecord(scope.row.id)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            :hide-on-single-page="total < 10"
            @current-change="currentChange"
            style="margin-left: 25%;"
          >
        </el-pagination> -->
      </div>
    </div>
    
    <!-- <el-dialog title="添加" :visible.sync="dialogVisible1" width="50%">
      <el-form ref="addForm" :model="addForm" label-width="130px">
        <el-form-item label="小课主题:">
          <el-input
            v-model="addForm.courseTheme"
            placeholder="请填写小课主题"
          ></el-input>
        </el-form-item>
        <el-form-item label="授课时间:">
          <el-date-picker
            v-model="addForm.courseTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            default-time="12:00:00">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="部门:">
          <el-input
            v-model="addForm.workshop"
            placeholder="请填写部门"
          ></el-input>
        </el-form-item>
        <el-form-item label="班组:">
          <el-input
            v-model="addForm.team"
            placeholder="请填写班组"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否按计划执行:">
          <el-radio v-model="addForm.isPlan" label="1" border>是</el-radio>
          <el-radio v-model="addForm.isPlan" label="0" border>否</el-radio>
        </el-form-item>
        <el-form-item label="授课人:">
          <el-input
            v-model="addForm.lecturerName"
            placeholder="请填写授课人"
          ></el-input>
        </el-form-item>
        <el-form-item label="班组审核人:">
          <el-input
            v-model="addForm.teamAuditor"
            placeholder="请填写班组审核人"
          ></el-input>
        </el-form-item>
        <el-form-item label="车间审核人:">
          <el-input
            v-model="addForm.workshopAuditor"
            placeholder="请填写车间审核人"
          ></el-input>
        </el-form-item>
        <el-form-item label="小课目的:">
          <el-input
            v-model="addForm.purpose"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input
            v-model="addForm.remark"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addDetail">确 定</el-button>
      </span>
    </el-dialog> -->
    <!-- <el-dialog title="添加完善培训记录" :visible.sync="dialogVisible1" width="50%">
      <el-form ref="addForm" :model="addForm" label-width="130px">
        <el-form-item label="小课主题:">
          <el-input
            v-model="addForm.courseTheme"
            placeholder="请填写小课主题"
          ></el-input>
        </el-form-item>
        <el-form-item label="授课时间:">
          <el-date-picker
            v-model="addForm.courseTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            default-time="12:00:00">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="部门:">
          <el-input
            v-model="addForm.workshop"
            placeholder="请填写部门"
          ></el-input>
        </el-form-item>
        <el-form-item label="班组:">
          <el-input
            v-model="addForm.team"
            placeholder="请填写班组"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否按计划执行:">
          <el-radio v-model="addForm.isPlan" label="1" border>是</el-radio>
          <el-radio v-model="addForm.isPlan" label="0" border>否</el-radio>
        </el-form-item>
        <el-form-item label="授课人:">
          <el-input
            v-model="addForm.lecturerName"
            placeholder="请填写授课人"
          ></el-input>
        </el-form-item>
        <el-form-item label="班组审核人:">
          <el-input
            v-model="addForm.teamAuditor"
            placeholder="请填写班组审核人"
          ></el-input>
        </el-form-item>
        <el-form-item label="车间审核人:">
          <el-input
            v-model="addForm.workshopAuditor"
            placeholder="请填写车间审核人"
          ></el-input>
        </el-form-item>
        <el-form-item label="应到人数:">
          <el-input
            v-model="addForm.shouldNumber"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="实到人数:">
          <el-input
            v-model="addForm.practicalNumber"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="未到人员姓名:">
          <el-input
            v-model="addForm.nonArrivalNames"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="未到原因:">
          <el-input
            v-model="addForm.nonArrivalCause"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="授课目的:">
          <el-input
            v-model="addForm.purpose"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="小课重点内容:">
          <el-input
            v-model="addForm.courseContent"
            type="textarea"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="互动提问:">
          <el-input
            v-model="addForm.interaction"
            type="textarea"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addPerfectDetail">确 定</el-button>
      </span>
    </el-dialog> -->

    <el-dialog title="培训详情及确认参加" :visible.sync="dialogVisible2" width="50%">
      <el-form ref="detailMsg" :model="detailMsg" label-width="130px">
        <el-form-item label="小课主题:">
          <el-input v-model="detailMsg.courseTheme" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="授课时间:">
          <el-input v-model="courseTime1" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="部门:">
          <el-input v-model="detailMsg.workshop" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="班组:">
          <el-input v-model="detailMsg.team" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="是否按计划执行:">
          {{detailMsg.isPlan?'是':'否'}}
        </el-form-item>
        <el-form-item label="授课人:">
          <el-input v-model="detailMsg.lecturerName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="班组审核人:">
          <el-input v-model="detailMsg.teamAuditor" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="车间审核人:">
          <el-input v-model="detailMsg.workshopAuditor" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="应到人数:">
          <el-input v-model="detailMsg.shouldNumber" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="小课目的:">
          <el-input v-model="detailMsg.purpose" type="textarea" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="参加人员:">
          <el-input v-model="detailMsg.participation" type="textarea" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="不参加人员:">
          <el-input v-model="detailMsg.nonArrivalNames" type="textarea" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="不参加原因:">
          <el-input v-model="detailMsg.nonArrivalCause" type="textarea" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click='dialogVisible2 = false'>关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cheader from "@/components/header.vue";
import utils from "@/utils/utils";
import { toBeConfirmedList,deleteCourseById,detailsCourse,receiveCourse,addPerfectDetail } from '@/api/micro-train';
export default {
  components: {
    cheader,
  },
  data() {
    return {
      title: "培训确认列表",
      form: "",
      value1: "",
      // findMsg:{
      //   courseTime:'',
      //   lecturerName:'',
      //   workshop:'',
      //   team:'',
      // },
      // addForm:{
      //   courseTheme:'',
      //   courseTime:'',
      //   isPlan:'',
      //   lecturerName:'',
      //   purpose:'',
      //   remark:'',
      //   team:'',
      //   teamAuditor:'',
      //   workshop:'',
      //   workshopAuditor:'',
      // },
      // addForm:{
      //   courseContent:'',
      //   interaction:'',
      //   nonArrivalCause:'',
      //   nonArrivalNames:'',
      //   practicalNumber:'',
      //   purpose:'',
      //   shouldNumber:'',
      //   courseTheme:'',
      //   courseTime:'',
      //   isPlan:'',
      //   lecturerName:'',
      //   team:'',
      //   teamAuditor:'',
      //   workshop:'',
      //   workshopAuditor:'',
      // },
      courseTime1:'',
      detailMsg:{},
      dialogVisible1: false,
      dialogVisible2: false,
      trainList:[],
      pageNo: 1,  // 分页页码
      pageSize: 10,  // 每页条数
      total: 0,
      thisId:'',
    };
  },
  created() {
    this.getTrainList()
  },
  methods: {
    async getTrainList() {
      const res = await toBeConfirmedList()
      if (res.code == 200) {
        this.trainList = res.data
      }
      console.log('this.trainList', this.trainList)
    },
    // addDetail() {
    //   this.$refs.addForm.validate(async (valid) => {
    //     if (valid) {
    //       const res = await addDetail({
    //         courseTheme: this.addForm.courseTheme,
    //         courseTime: this.addForm.courseTime,
    //         isPlan: this.addForm.isPlan,
    //         lecturerName: this.addForm.lecturerName,
    //         purpose: this.addForm.purpose,
    //         remark: this.addForm.remark,
    //         team: this.addForm.team,
    //         teamAuditor: this.addForm.teamAuditor,
    //         workshop: this.addForm.workshop,
    //         workshopAuditor: this.addForm.workshopAuditor,
    //         participationIds: ["615438214b46b3f04eeae0a5","615435c44b46b3f04eeae09e","614309d64b46a81477981d86"],
    //       })
    //       if (res.code == 200) {
    //         this.$message({
    //           message: '创建成功',
    //           type: 'success',
    //         })
    //         this.dialogVisible1 = false
    //         this.getTrainList()
    //       }
    //       console.log('res', res)
    //     } else {
    //       return false
    //     }
    //   })
    // },
    // addPerfectDetail() {
    //   this.$refs.addForm.validate(async (valid) => {
    //     if (valid) {
    //       const res = await addPerfectDetail({
    //         courseTheme: this.addForm.courseTheme,
    //         courseContent: this.addForm.courseContent,
    //         courseTime: this.addForm.courseTime,
    //         isPlan: this.addForm.isPlan,
    //         lecturerName: this.addForm.lecturerName,
    //         purpose: this.addForm.purpose,
    //         team: this.addForm.team,
    //         teamAuditor: this.addForm.teamAuditor,
    //         workshop: this.addForm.workshop,
    //         workshopAuditor: this.addForm.workshopAuditor,
    //         interaction: this.addForm.interaction,
    //         nonArrivalCause: this.addForm.nonArrivalCause,
    //         nonArrivalNames: this.addForm.nonArrivalNames,
    //         practicalNumber: this.addForm.practicalNumber,
    //         shouldNumber: this.addForm.shouldNumber,
    //         id: "11",
    //       })
    //       if (res.code == 200) {
    //         this.$message({
    //           message: '创建成功',
    //           type: 'success',
    //         })
    //         this.dialogVisible1 = false
    //         this.getTrainList()
    //       }
    //       console.log('res', res)
    //     } else {
    //       return false
    //     }
    //   })
    // },
    cancel(){
      this.dialogVisible1 = false
      this.$refs.addForm.resetFields()
    },
    // query() {
    //   this.getTrainList()
    // },
    // reset() {
    //   this.findMsg.courseTime = ''
    //   this.findMsg.lecturerName = ''
    //   this.findMsg.workshop = ''
    //   this.findMsg.team = ''
    // },
    // currentChange(pageNo) {
    //   this.pageNo = pageNo
    //   this.getTrainList()
    // },
    indexAdd(index) {
      return index + 1 + (this.pageNo - 1) * this.pageSize
    },
    goDetail(id){
      this.dialogVisible2 = true;
      this.thisId = id;
      detailsCourse({"id":id}).then(res=>{
          this.detailMsg = res.data;
          this.courseTime1 = utils.formatDate(this.detailMsg.courseTime,'yyyy-MM-dd HH:mm:ss')
          console.log(this.courseTime1)
      })
    },
    deleteRecord(id){
      this.thisId = id;
      this.$confirm('是否删除这条培训记录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          console.log('11111',this.thisId)
          deleteCourseById({"id":this.thisId}).then(res=>{
            this.getTrainList()
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.main-seting {
  width: 100%;
  height: auto;
  padding-bottom: 30px;
}
.c-main-show {
  margin-left: 35px;
  height: auto;
  background: #fff;
  margin-right: 35px;
  margin-bottom: 35px;
  position: relative;
  // overflow: hidden;
  border: 1px #dcdee0 solid;
}
.title-text {
  width: 100%;
  height: 50px;
  border-bottom: 1px #dcdee0 solid;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
  font-weight: 700;
  color: #666666;
  line-height: 50px;
  // padding-left: 25px;

  p{
    margin-left: 25px;
  }
}
.main-scroll {
  height: 1000px;
  overflow-y: scroll;
}
</style>